<template>
  <div class="refundDetails">
    <div class="my-header">
      <i class="back iconfont icon-left" @click="$router.go(-1)"></i>
      <strong>售后详情</strong>
      <i style="min-width: 0.65rem;"></i>
    </div>
    <div class="status">
      <h3 class="red">{{returnDetails.returnStatus|returnStatus}}</h3>
      <div class="status-info" v-if="returnDetails.returnStatus == 1">
        <span style="min-width:80px;">注意事项：</span>
        <span>如果仓库拒绝退款协议，请与客服沟通具体原因，再根据双方的协议结果，重新修改退款协议提交。退款成功后，最终退款金额将 原路退还至您的付款账户中。 </span>
      </div>
      <div v-if="returnDetails.returnStatus == 2">
        <div class="status-info">
          <span style="min-width:100px;color:#333;">请将商品寄回至：</span>
          <span class="address"> {{returnDetails.returnAddress}} {{returnDetails.returnAddressee}} 收,电话：{{returnDetails.returnPhone}},邮编：{{returnDetails.returnZipCode}} </span>
        </div>
        <div class="tell-box">
          <div class="tell" @click="$router.push({name:'fillExpress',query:{id:returnDetails.id}})">填写快递信息</div>
        </div>
      </div>
    </div>
    <div class="status " v-if="returnDetails.returnStatus == 2">
      <h3>退货说明</h3>
      <div class="gray">
        <p>1、退回的商品必须不影响二次销售，否则一律拒收；</p>
        <p>2、退回货品请先垫付邮费，到付件一律拒收；</p>
        <p>3、退回的商品内必须加个纸条，上面写上下单时收货人的姓名和电话、订单编号或我们发货时的商品清单；</p>
        <p>4、如有质量问题请备注清楚是什么质量问题，无纸条或发货清单的一律拒收。</p>
        <p>若因未放纸条或发货清单造成退款延后或商品丢失后果由买家承担。</p>
      </div>
    </div>
    <div class="bgc-box" v-if="(returnDetails.returnStatus == 3||returnDetails.returnStatus == 8)&&returnDetails.orderGoodsStatus!=2">
      <h3>退货物流凭证</h3>
      <p>
        <span>退货时间：</span>{{returnDetails.returnGoodsDate|formatDate( 'yyyy-MM-dd hh:mm:ss')}}</p>
      <p>
        <span>物流公司：</span>{{returnDetails.express}}</p>
      <p>
        <span>运单号：</span>{{returnDetails.expressCode}}</p>
    </div>
    <div class="bgc-box" v-if="returnDetails.returnStatus == 5">
      <p>
        <span>拒绝原因：</span>{{returnDetails.refusalReason}}</p>
    </div>
       <div class="bgc-box" v-if="returnDetails.returnStatus ==7">
      <p>
        <span>退款说明：</span>预计三个工作日内退款至原支付账户。</p>
    </div>

    <div class="orderGoods">
      <div class="orderIndex">
        <div class="c-title">{{returnDetails.supplierWarehouse}}
        </div>
        <div class="c-order">
          <div class="order-mid">
            <p>{{returnDetails.sellingPoints}}</p>
            <span>货号：{{returnDetails.goodsCode}}</span><br>
            <span v-if="!returnDetails.sizeAlias">尺码：{{returnDetails.goodsSpec}}</span>
            <span v-if="returnDetails.sizeAlias">尺码：{{returnDetails.goodsSpec}}({{returnDetails.sizeAlias}})</span>
          </div>
          <img :src="returnDetails.goodsImg" alt="" class="pic">
          <div class="order-right">
            <p>&yen;{{returnDetails.goodsDiscountPrice|formatMoney}}</p>
            <span class="count">&yen;{{returnDetails.goodsMoney|formatMoney}}</span><br>
            <span>x{{returnDetails.returnNum}}</span>
          </div>
        </div>
        <div class="price">
          <p>
            售后金额
            <span>（含运费&yen;{{returnDetails.returnFreight|formatMoney}}）</span>
            <span class="proprice">&yen;{{returnDetails.returnPrice|formatMoney}}</span>
          </p>
        </div>
        <div class="tell-box">
          <div class="tell" @click="callSever">拨打商户电话</div>
        </div>
      </div>
    </div>
    <div class="info">
      <h3>售后协议</h3>
      <p>
        <span class="left">申请售后时间</span>
        <span class="right">{{returnDetails.createDate|formatDate( 'yyyy-MM-dd hh:mm:ss')}}</span>
      </p>
      <p>
        <span class="left">售后编号</span>
        <span class="right">{{returnDetails.returnCode}}</span>
      </p>
      <p>
        <span class="left">订单号</span>
        <span class="right">{{returnDetails.orderCode}}</span>
      </p>
      <p>
        <span class="left">货品情况</span>
        <span class="right">{{returnDetails.returnGoodsStatus|returnGoodsStatus}}</span>
      </p>
      <p>
        <span class="left">申请售后原因</span>
        <span class="right">{{returnDetails.returnReason}}</span>
      </p>
      <p>
        <span class="left">退款金额</span>
        <span class="right">&yen;{{returnDetails.returnPrice|formatMoney}}</span>
      </p>
      <p>
        <span class="left">退还运费</span>
        <span class="right">&yen;{{returnDetails.returnFreight|formatMoney}}</span>
      </p>
      <p class="explain">
        <span class="left">申请售后说明</span>
        <span class="right">{{returnDetails.returnNote}}</span>
      </p>
      <div class="proof">
        <span>凭证</span>
        <div class="imgList">
          <div class="imgBox" v-for="(item,index) in returnDetails.returnImgList" :key="index">
            <img :src="item.returnImg" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="btn-box" v-if="activeBar">
      <button style="border-right:1px solid #E0E6EA;"  :class="{'one':hideReback}"   @click="change" v-if="!hideEdit">修改退款协议</button>
      <button @click="revoke" :class="{'one':hideEdit}"  v-if="!hideReback" >撤销退款申请</button>
    </div>
  </div>
</template>
<script>
  import {
    getReturnDetails,
    revokeReturnGoods
  } from '@/api/order'
  import {
    mapGetters
  } from 'vuex'
  import {
    MessageBox,
    Toast
  } from 'mint-ui'
  import {
    setScrollTop
  } from '@/utils'
  export default {
    data() {
      return {
        flag: false,
        returnDetails: {}
      }
    },
    watch: {},
    components: {},
    created() {
      this.fetchData()
      // 置顶
      setScrollTop(0)
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      }),
      hideEdit() {
        if (this.returnDetails === undefined) return
        // 是否显示修改 orderGoodsStatus (1:未付款 2:未发货 3:未收货 4:已收货 5:已撤销)returnStatus 1 待审核 2等待寄回 3 已寄回 4 已确认5 已拒绝 6 已撤销 7待退款 8已退款
        // 已发货是否显示修改
        const flag = this.returnDetails.orderGoodsStatus === 3 && this.returnDetails.returnStatus === 2
        return flag
      },
      hideReback() {
        const flag = this.returnDetails.orderGoodsStatus === 2
        return flag
      },
      activeBar() {
        if (this.returnDetails.returnGoodsStatus === undefined) return
        return ![3, 6, 7, 8].includes(this.returnDetails.returnStatus)
        /*  if (this.returnDetails.orderGoodsStatus === 3) {
            return ![6, 7, 8].includes(this.returnDetails.returnStatus)
          } else {
            console.log('ddd')
            return ![6, 7, 8].includes(this.returnDetails.returnStatus)
          }*/
      }
    },
    filters: {
      returnGoodsStatus(val) {
        return val === 0 ? '' : val === 1 ? '没有收到货品' : val === 2 ? '买家已收到货' : '未知'
      },
      returnStatus(val) {
        return val === 0 ? '' : val === 1 ? '售后协议等待平台确认' : val === 2 ? '同意退款协议，等待退货' : val === 3 ? '已退货，等待仓库收货' : val ===
          4 ? '已确认' : val === 5 ? '退款协议被拒绝，等待买家修改' : val === 6 ? '买家已撤销售后申请' : val === 7 ? '待退款' : val ===
          8 ? '退款成功' : '未知'
      }
    },
    methods: {
      callSever() { // 联系客服
        MessageBox({
          title: '联系客服',
          confirmButtonText: '确定',
          message: '<p>客服电话:<a href="tel://021-50327868">021-50327868</a></p>' +
            '<p>客服QQ: <a href ="http://wpa.qq.com/msgrd?v=3&uin=204316164&site=qq&menu=yes">204316164</a></p>' +
            '<p>客服QQ: <a href ="http://wpa.qq.com/msgrd?v=3&uin=1224652134&site=qq&menu=yes">1224652134</a></p>' +
            '客服工作时间: 9:00—18:00',
          showCancelButton: false
        }).then(action => {})
      },
      fetchData() {
        // 判断是否登录
        if (!this.userInfo) return
        // 获取信息
        const formData = {
          userId: this.userInfo.id,
          returnId: this.$route.query.returnId
        }
        getReturnDetails(formData).then(res => {
          this.returnDetails = res.data.returnDetails
        })
      },
      revoke() {
        MessageBox.confirm('确定撤销该售后?').then(action => {
          revokeReturnGoods({
            userId: this.userInfo.id,
            returnId: this.$route.query.returnId
          }).then(res => {
            Toast('售后申请已撤销')
            this.fetchData()
          })
        })
      },
      change() {
        this.$router.replace({
          name: 'fillRefundInfo',
          query: {
            orderId: this.returnDetails.orderId,
            orderGoodsId: this.returnDetails.orderGoodsId,
            returnId: this.returnDetails.id,
            num: this.returnDetails.returnNum
          }
        })
      }
    }
  }

</script>
<style lang="scss">
  @import '~assets/common/css/mixin.scss';
  .refundDetails {
    min-height: 100vh;
    margin-top: 1.25rem;
    .status {
      background-color: #fff;
      margin-top: 10px;
      padding: 15px;
      line-height: 20px;
      h3 {
        font-size: 14px;
        margin-bottom: 15px;
        &.red {
          color: $red;
        }
      }
      .gray {
        color: $gray;
      }
      .status-info {
        @include flexbox(flex-start,
        flex-start,
        row,
        nowrap);
        color: $gray;
        .address {
          color: $blue;
        }
      }
      .tell-box {
        padding: 15px;
        .tell {
          line-height: 32px;
          border: 1px solid #979797;
          text-align: center;
        }
      }
    }
    .bgc-box {
      background-color: #FFF9D7;
      padding: 15px;
      line-height: 20px;
      h3 {
        line-height: 30px;
      }
      p {
        color: #A1A1A1;
        span {
          float: left;
        }
      }
    }
    .orderGoods {
      margin-bottom: 15px;
      .orderIndex {
        background-color: #fff;
        margin-top: 10px;
        .c-title {
          height: 30px;
          line-height: 30px;
          padding: 0 10px;
        }
        .c-order {
          padding: 10px 100px;
          background-color: rgb(252, 252, 252);
          overflow: hidden;
          margin-bottom: 3px;
          .pic {
            position: relative;
            float: left;
            width: 70px; // height: 85px;
            height: auto;
            margin-left: -100%;
            left: -90px;
          }
          .order-mid {
            position: relative;
            float: left;
            width: 100%;
            height: 100%; //   line-height: 25px;
            p {
              @include textoverflow(2);
            }
            span {
              color: $gray;
              margin-top: 10px;
              display: inline-block;
            }
          }
          .order-right {
            text-align: right;
            position: relative;
            vertical-align: top;
            float: right;
            width: 65px;
            height: 100%;
            margin-left: -190px;
            right: -90px;
            line-height: 25px;
            span {
              color: rgb(190, 190, 190);
              float: right;
            }
            .count {
              text-decoration: line-through;
            }
            button {
              width: 65px;
              height: 25px;
              display: inline-block;
              border: 1px solid #CECECE;
              background-color: #F0F0F0;
              border-radius: 2px;
              margin-top: 15px;
            }
          }
        }
        .price {
          padding: 10px 10px;
          border-bottom: 1px solid #EAEEF1;
          p {
            color: #000;
            font-size: 14px;
            line-height: 20px;
            span {
              font-size: 12px;
              color: #A1A1A1;
            }
          }
          .proprice {
            float: right;
            color: $red;
            font-size: 14px;
          }
        }
        .tell-box {
          padding: 15px;
          .tell {
            line-height: 32px;
            border: 1px solid #979797;
            text-align: center;
          }
        }
      }
    }
    .info {
      padding-left: 10px;
      background-color: #fff;
      h3 {
        height: 44px;
        line-height: 44px;
        font-size: 14px;
        border-bottom: 1px solid #E0E6EA;
      }
      p {
        height: 44px;
        line-height: 44px;
        border-bottom: 1px dashed #E0E6EA;
        overflow: hidden;
        .left {
          float: left;
          width: 30%;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }
        .right {
          float: left;
          color: #A1A1A1;
        }
      }
      .explain {
        height: auto;
        .right {
          width: 60%;
        }
      }
      .proof {
        padding-bottom: 45px;
        span {
          line-height: 44px;
        }
        .imgList {
          overflow: hidden;
          @include flexbox(flex-start,
          center,
          row,
          wrap);
          .imgBox {
            flex: 0 0 33%;
            padding: 5px; // height: 21.5%;
            // width: 21.5%;
            // float: left;
            // margin-right: 10px;
            // margin-bottom: 10px;
            // display: table-cell;
            // text-align: center;
            img {
              width: 100%;
            }
          }
        }
      }
    }
    .btn-box {
      background-color: #fff;
      height: 45px;
      line-height: 45px; // padding: 0 15px;
      position: fixed;
      bottom: 0;
      width: 100%;
      box-sizing: content-box;
      -moz-box-shadow: 0px -2px 1px #EAEEF1;
      -webkit-box-shadow: 0px -2px 1px #EAEEF1;
      box-shadow: 0px -2px 1px #EAEEF1;
      .one{
        width:100%!important;
      }
      button {
        width: 50%;
        height: 100%;
        float: left;
        background-color: #fff;
        color: #7C7C7C;
      }
    }
  }

</style>
